<template>
  <view class="form-textarea">
    <view class="textarea-input">
      <textarea v-if="showInput || !replace" :class="{ clear: showClear }" :value="defaultValue"
        :adjust-position="false" :show-confirm-bar="false" :focus="inputFocus" :maxlength="maxlength"
        :auto-height="autoHeight" :confirm-type="confirmType" :ignoreCompositionEvent="false"
        :hold-keyboard="holdKeyboard" @compositionstart="handleCompositionstart" @focus="handleFocus"
        @input="handleInput" @blur="handleBlur" @linechange="handleLinechange" />
      <view class="textarea" v-else v-html="formatHtml(defaultValue)" @click="handleShow"></view>
      <view :class="['placeholder', { clear: showClear }, { 'ios': isIOS}]" v-if="showPlaceholder" v-html="placeholder"
        @click="handleShow"></view>
      <view class="clear-icon" v-if="showClear && clearDisabled" @click="handleClear">
        <u-icon name="close-circle-fill" color="#c0c4cc"></u-icon>
      </view>
    </view>
    <view class="textarea-limit" v-if="showWordLimit && maxlength !== -1"><span
        :style="{color: lengthColor}">{{ defaultValue.length }}</span> / {{ maxlength }} 字</view>
  </view>
</template>

<script>
import { formatHtml } from "@/utils/handle";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: String,
    maxlength: { type: Number, default: -1 },
    autoHeight: { type: Boolean, default: false },
    confirmType: { type: String, default: "done" },
    showWordLimit: { type: Boolean, default: false },
    replace: { type: Boolean, default: true },
    focus: { type: Boolean, default: false },
    holdKeyboard: { type: Boolean, default: false },
    lengthColor: String,
    clearDisabled: { type: Boolean, default: true },
  },
  data() {
    return {
      formatHtml,
      showClear: false,
      showInput: false,
      showPlaceholder: true,
      inputFocus: this.focus,
      defaultValue: this.value,
      isIOS: uni.getSystemInfoSync().platform == "ios",
    };
  },
  watch: {
    value: {
      handler(val) {
        this.showPlaceholder = !val;
        this.defaultValue = val;
      },
      immediate: true,
    },
    focus: {
      handler(val) {
        this.inputFocus = val;
      },
      immediate: true,
    },
  },
  methods: {
    handleShow() {
      this.inputFocus = false;
      this.showInput = true;
      this.$nextTick(() => {
        this.inputFocus = true;
      });
    },
    handleClear() {
      // this.inputFocus = false; // 添加这个无法修改textarea值
      this.defaultValue = "";
      this.$emit("update:value", this.defaultValue);
      this.$emit("line-change", { lineCount: 0 });

      this.$nextTick(() => {
        this.inputFocus = true;
      });
    },
    handleFocus(e) {
      this.showInput = true;
      this.showClear = true;
      this.showPlaceholder = false;
      this.$emit("board-change", e.detail.height || 0);
      this.$emit("update:focus", true);
    },
    handleInput(e) {
      this.showPlaceholder = !this.defaultValue;
      this.$emit("update:value", e.detail.value);
    },
    handleBlur() {
      this.showInput = false;
      this.showPlaceholder = !this.defaultValue;
      this.$emit("board-change", 0);
      this.$emit("update:focus", false);
      setTimeout(() => {
        this.showClear = false;
      }, 0);
    },
    handleCompositionstart() {
      this.showPlaceholder = false;
    },
    handleLinechange(event) {
      this.$emit("line-change", event.detail);
    },
  },
};
</script>

<style lang="scss">
.form-textarea {
  width: 100%;
  .textarea-input {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    position: relative;
    overflow: auto;
    word-break: break-all;
    textarea,
    .textarea {
      flex: 1;
      padding: 24rpx 32rpx;
      line-height: $uni-font-size-sec;
      font-size: $uni-font-size-base;
      box-sizing: border-box;
      overflow: hidden;
      word-break: break-all;
      &.textarea {
        display: flex;
        flex-direction: column;
        rich-text {
          height: 100%;
          overflow: hidden;
        }
      }
      &.clear {
        padding: 24rpx 0 24rpx 32rpx;
      }
    }
    .placeholder {
      position: absolute;
      left: 0;
      top: 0;
      padding: 24rpx 32rpx;
      width: 100%;
      line-height: $uni-font-size-sec;
      font-size: $uni-font-size-base;
      &.clear {
        padding: 24rpx 76rpx 24rpx 32rpx;
      }
      &.ios {
        padding-left: 44rpx;
      }
    }
    .clear-icon {
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      height: 100%;
    }
  }
  .textarea-limit {
    margin: 12rpx 0 20rpx;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-888;
    line-height: $uni-font-size-lg;
    text-align: right;
  }
}
</style>
